<template>
  <!-- 控制中心书籍表格操作 -->
  <div class="controlCenterBannerComments">
    <div class="bg-white shadow-sm p-1 mb-2 d-flex justify-content-between">
      <div class="">
        <router-link to='/userCenter'>用户中心</router-link> -> 用户评论
      </div>
      <div class="reloadTable d-flex mr-2">
        <img src="@/assets/img/reload.png" alt="" class="topSearchImg mr-1">
        <p @click="reloadWeb" style="cursor: pointer">刷新</p>
      </div>
    </div>
    <div class="bg-white shadow-sm p-1">
      <div class=" mb-4">
        <div class="d-flex">
          <input type="text" v-model="theComments">
          <button class="btn btn-sm btn-primary" @click="searchComments">查询评论</button>
        </div>
      </div>
      <table class="table table-bordered table-hover" v-if="this.$store.state.getCommentsTable">
        <thead class="thead-light text-center">
          <tr>
            <th v-if="tableNumFlag"></th>
            <th scope="col" v-if="tableNumFlag" v-for="(v, k) in this.$store.state.getCommentsTable[0]">{{k}}</th>
            <th scope="col" v-if="!tableNumFlag" v-for="(v, k) in smtitle">{{v}}</th>
            <th>control</th>
          </tr>
        </thead>
        <tbody  v-for="(v, k) in this.$store.state.getCommentsTable" :key='k'>
          <tr :class="{'rowColor': k % 2}">
            <th v-if="tableNumFlag" scope="row">{{k + 1}}</th>
            <td v-if="tableNumFlag">{{v.id}}</td>
            <td style="max-width: 300px;">{{v.content}}</td>
            <td>{{v.username}}</td>
            <td>{{v.name}}</td>
            <!-- 操作按钮 -->
            <td scope="col" class="d-flex justify-content-center border-0">
              <button class="btn btn-sm btn-danger btnText" @click='deleteComments(v)'>删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ControlCenterBannerBooks',
    data () {
      return {
        theComments: '',
        getUserData: {
          id: JSON.parse(localStorage.getItem('userInformation')).id,
          table: 'user'
        },
        tableNumFlag: '',
        smtitle: [
          'content', 'username', 'bookname'
        ]
      }
    },
     beforeRouteEnter(to, from, next) {
      // 在进入当前路由组件前判断屏幕大小来调整表格的渲染数据
      if (window.screen.width >= 768) {
        next(vm => {
          vm.tableNumFlag = true;
        })
      } else {
        next(vm => {
          vm.tableNumFlag = false;
        })
      }
    },
    methods: {
      reloadWeb() {
        window.location.reload();
      },
      searchComments() {
        this.$store.dispatch('asynGetCommentsTable', this.theComments);
      },
      // 删除评论
      deleteComments(v) {
        let deleteComments = confirm(`是否删除评论 “${v.content}” ？`);
        if (deleteComments) {
          this.$store.dispatch('asynDeleteComments', v.id);
          setTimeout(() => {
             window.location.reload();
           }, 100)
        }
      }
    },
    computed: {
      
    },
    mounted() {
      // 判断本地用户是否存在，并且判断其管理员权限，然后进行路由跳转判断
      if (localStorage.getItem('userInformation')) {
        this.$store.dispatch('asynHasIdGetUser', this.getUserData);
        setTimeout(() => {
          if (this.$store.state.getChangeUserData.root == 'false') {
            window.location.hash = '/userCenter';
          }
        }, 500);
      }
    },
  }

</script>

<style scoped>
  .topSearchImg {
    width: 25px;
    height: 25px;
  }
  .reloadTable:hover .topSearchImg {
    transform: rotate(360deg);
    transition: all ease 1s;
  }
  .rowColor {
    background-color: rgb(242, 242, 242);
  }

  .btnText {
    font-size: .7em;
  }
</style>